<template>
    <div class="intros">
         <div class="intro_pics">
            <img src="https://p0.meituan.net/dpdeal/c89b4e874942e4aae22bdc7a6fc6f0e2119444.jpg%40450w_280h_1e_1c_1l%7Cwatermark%3D0"
     class="pic">
  </div>

  <div class="cont">
      <h3>VPN X IN TIME</h3>
      <p>仅售98元，价值188元单人首次超值精剪套餐，节假日通用！</p>
  </div>
  
  <div class="swipe-page-ctrl J_swipe_page_ctrl"><strong data-v-11ba7692="" class="J_swipe_page">1</strong>/1
        </div>
    <div class="cost_box">
        <div class="buy_box">
            <div class="price">￥</div>
             <div class="price_sum">98</div>
             <div class="menshijia">
                <span class="d_price">门市价￥188</span>
             </div>
            
             <div class="qiang">
              <router-link to='/beauty/hair/info/ininfo'>  <a  class="last" href="">立即抢购</a> </router-link>
            </div>
        </div>
            <div class="advantage">
                <ul>
                    <li>
                        <img src="../../../../../assets/style/iconfont/tui.svg">
                        <p>支持随时退款</p> 
                    </li>
                    <li>
                        <img src="../../../../../assets/style/iconfont/tui.svg">
                        <p>支持过期自动退</p> 
                    </li>
                    <li>
                        <img src="../../../../../assets/style/iconfont/user.svg">
                        <p class="light">已售1595</p> 
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name:"InfoIntro.vue"
}
</script>

<style scoped>
.intro_pics{  position: relative;}
.pic{ width: 100%;}
.info .swipe-page-ctrl {
  position: absolute;
  right: .25rem;
  top: 1.2rem;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: .6rem;
  font-size: .3rem;
  line-height: .2rem;
  color: #666;
  padding: 0.1rem 0.1rem 0.1rem;
  text-align: center;
}
.info .swipe-page-ctrl strong {
  font-weight: normal;
  color: #fff;
}
.info .cont {
  position: absolute;
  z-index: 9;
  top: 5rem;
  left: 0rem;
  width: 100%;
  box-sizing: border-box;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.6)));
}
.info .cont h3 {
    width: 43%;
  color: #fff;
  font-size: .4rem;
  font-weight: normal;
  line-height: .4rem;
  margin-bottom: .1rem;
}
.info .cont p {
    text-align:justify;
    width: 90%;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-align: left;
  font-size: .3rem;
  line-height: .3rem;
  margin-bottom: .1rem;
    
}

.info .cost_box {
    height: 2.2rem;
    margin-top: .1rem;
  padding-left: .3rem;
  background-color: #fff;
  border-bottom: rgb(241, 239, 239) solid .3rem;
}
.info .cost_box .buy_box{
    height: 1.2rem;
    border-bottom: solid rgb(209, 203, 203) .01rem;
}
.info .cost_box .buy_box .price{
    line-height: 1.2rem;
    float: left;
    color: #06c1ae;
    overflow: hidden;
}
.info .cost_box .buy_box .price_sum{
    float: left;
    font-size: 1rem;
    /* text-align: left; */
    color: #06c1ae;
    /* display: inline-block; */
    
}
.info .cost_box .buy_box  .menshijia .d_price{
    width: 28%;
    height: .4rem;
    padding-top: 0.5rem;
    float: left;
    
}
.info .cost_box .buy_box .qiang .last{
    width: 40%;
    height: .7rem;
    border-radius: .5rem;
    margin-top: .1rem;
    background-color: #f90;
    text-align: center;
    line-height: .7rem;
    font-size: .45rem;
    padding: .1rem 0;
    display: block;
    color: #fff;
    float: right;
    overflow: hidden;
    text-decoration: none;
}
.info .cost_box .advantage{
    line-height: .9rem;
}
ul li{
    list-style: none;
    width: 32%;
    float: left;
}
ul li img{
  height: 18px;
  width: 18px;
  margin-top: .26rem;
  
}
ul li p{
    font-size: .31rem;
    color: rgb(148, 240, 57);
    float: right;
    margin-bottom: .22rem;
}
ul li p.light{
    color: #000;
}
</style>


